<template>
  <div>
      <van-nav-bar
        title="修改密码"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
      />
    <div class="revise">

      <!-- 输入旧密码 -->
      <van-field
        v-model="oldPassword"
        type="password"
        name="oldPassword"
        label="旧密码"
        placeholder="请输入旧密码"
        :rules="[
          { required: true, message: '请填写密码' },
          {
            validator: (i) => /^\w{6,12}$/.test(i),
            message: '密码格式为6-12位数字或字母',
          },
        ]"
      >
      </van-field>

      <!-- 输入新密码 -->
      <van-field
        v-model="newPassword"
        type="password"
        name="newPassword"
        label="新密码"
        placeholder="请输入新密码"
        :rules="[
          { required: true, message: '请填写密码' },
          {
            validator: (i) => /^\w{6,12}$/.test(i),
            message: '密码格式为6-12位数字或字母',
          },
        ]"
      >
      </van-field>

      <!-- 再次输入新密码 -->
      <van-field
        v-model="newPassword1"
        type="password"
        name="newPassword1"
        label="确认密码"
        placeholder="请再次输入新密码"
        :rules="[
          { required: true, message: '请填写密码' },
          {
            validator: (i) => /^\w{6,12}$/.test(i),
            message: '密码格式为6-12位数字或字母',
          },
        ]"
      >
      </van-field>

      <!-- 确定 -->
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          color="#4fc08d"
          :loading="loadingbtn"
          >确定重置</van-button
        >
      </div>
    </div>
    <!-- <router-link to="/forget">
        <a href="" style="color: blue; float: right; margin-right: 20px"
          >忘记密码</a
        >
      </router-link> -->
  </div>
</template>

<script>
import { revise } from "@/api/user";

export default {
  data() {
    return {
      oldPassword: "",
      newPassword: "",
      newPassword1: "",
      loadingbtn: false,
    };
  },
  methods: {
    // 数据检验成功
    onSubmit(values) {
      console.log("submit", values);
      this.loadingbtn = true;
      revise(values)
        .then((res) => {
          // loadingbtn成功后
          console.log(res);
        })
        .finally((e) => {
          this.loadingbtn = false;
        });
      setTimeout((v) => {
        this.$router.back();
      }, 800);
    },
  },
};
</script>

<style>
</style>